<template>
  <div class="router-tutorial">
    <div class="tutorial-content">
      <h2>Vue Router 基础教程</h2>
      <p>Vue Router是Vue.js官方的路由管理器。它允许我们构建单页应用，实现不同视图之间的无刷新切换。</p>
      
      <div class="knowledge-point">
        <h3>1. 基本路由配置</h3>
        <p>路由配置包含以下关键部分：</p>
        <ul>
          <li><strong>路由对象</strong>：包含路径和组件的映射关系</li>
          <li><strong>&lt;router-view&gt;</strong>：路由匹配的组件将渲染在这里</li>
          <li><strong>&lt;router-link&gt;</strong>：用于导航的链接组件</li>
        </ul>
        <p>查看右侧代码，了解基本的路由配置结构。</p>
      </div>

      <div class="knowledge-point">
        <h3>2. 动态路由匹配</h3>
        <p>Vue Router支持动态路径参数，以冒号开头。例如：</p>
        <pre>/user/:id</pre>
        <p>在组件中，可以通过 <code>this.$route.params.id</code> 或者 <code>useRoute().params.id</code> 访问参数。</p>
        <p>点击右侧的"用户页面"链接，体验动态路由。</p>
      </div>

      <div class="knowledge-point">
        <h3>3. 嵌套路由</h3>
        <p>Vue Router支持路由嵌套，通过 <code>children</code> 选项配置：</p>
        <pre>
{
  path: '/user',
  component: User,
  children: [
    { path: 'profile', component: Profile },
    { path: 'posts', component: Posts }
  ]
}</pre>
        <p>在父级路由组件中需要再次使用 <code>&lt;router-view /&gt;</code> 来渲染嵌套路由。</p>
      </div>

      <div class="knowledge-point">
        <h3>4. 编程式导航</h3>
        <p>除了使用 <code>&lt;router-link&gt;</code>，还可以通过编程方式导航：</p>
        <pre>
// 字符串路径
router.push('/home')

// 对象
router.push({ path: '/about' })

// 命名路由
router.push({ name: 'user', params: { id: '123' } })</pre>
        <p>点击右侧的"编程式导航"按钮，查看效果。</p>
      </div>
    </div>
    
    <div class="code-playground">
      <div class="code-tabs">
        <button :class="{ active: activeTab === 'App' }" @click="activeTab = 'App'">App.vue</button>
        <button :class="{ active: activeTab === 'Home' }" @click="activeTab = 'Home'">Home.vue</button>
        <button :class="{ active: activeTab === 'About' }" @click="activeTab = 'About'">About.vue</button>
        <button :class="{ active: activeTab === 'User' }" @click="activeTab = 'User'">User.vue</button>
        <button :class="{ active: activeTab === 'router' }" @click="activeTab = 'router'">router.js</button>
      </div>
      
      <div class="code-editor">
        <pre v-if="activeTab === 'App'"><code>{{ appCode }}</code></pre>
        <pre v-if="activeTab === 'Home'"><code>{{ homeCode }}</code></pre>
        <pre v-if="activeTab === 'About'"><code>{{ aboutCode }}</code></pre>
        <pre v-if="activeTab === 'User'"><code>{{ userCode }}</code></pre>
        <pre v-if="activeTab === 'router'"><code>{{ routerCode }}</code></pre>
      </div>
      
      <div class="preview">
        <h3>实时预览</h3>
        <div class="preview-container">
          <div class="demo-app">
            <h2>Vue Router 示例</h2>
            <div class="nav-links">
              <a href="#" @click.prevent="currentView = 'Home'">首页</a> | 
              <a href="#" @click.prevent="currentView = 'About'">关于</a> | 
              <a href="#" @click.prevent="currentView = 'User'">用户页面</a>
              <button @click="programmaticNav">编程式导航</button>
            </div>
            <div class="router-view-container">
              <component :is="currentComponent" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RouterTutorial',
  
  data() {
    return {
      activeTab: 'App',
      currentView: 'Home',
      userId: '123',
      
      // 示例代码
      appCode: `<template>
  <div id="app">
    <h1>Vue Router 示例</h1>
    <div class="nav">
      <router-link to="/">首页</router-link> | 
      <router-link to="/about">关于</router-link> |
      <router-link to="/user/123">用户页面</router-link>
    </div>
    <!-- 路由匹配的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>`,
      
      homeCode: `<template>
  <div class="home">
    <h2>首页</h2>
    <p>这是应用的首页</p>
  </div>
</template>`,
      
      aboutCode: `<template>
  <div class="about">
    <h2>关于页面</h2>
    <p>这是一个关于页面</p>
  </div>
</template>`,
      
      userCode: `<template>
  <div class="user">
    <h2>用户页面</h2>
    <p>用户ID: {{ $route.params.id }}</p>
    
    <!-- 嵌套路由的视图 -->
    <div class="user-nav">
      <router-link to="/user/123/profile">个人资料</router-link> |
      <router-link to="/user/123/posts">帖子</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>`,
      
      routerCode: `import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import User from './components/User.vue'
import UserProfile from './components/UserProfile.vue'
import UserPosts from './components/UserPosts.vue'

// 定义路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    // 嵌套路由
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router`
    }
  },
  
  computed: {
    currentComponent() {
      if (this.currentView === 'Home') {
        return {
          template: '<div class="home-demo"><h3>首页</h3><p>这是首页内容</p></div>'
        }
      } else if (this.currentView === 'About') {
        return {
          template: '<div class="about-demo"><h3>关于页面</h3><p>这是关于页面内容</p></div>'
        }
      } else if (this.currentView === 'User') {
        return {
          template: `<div class="user-demo">
            <h3>用户页面</h3>
            <p>用户ID: ${this.userId}</p>
            <div class="user-nav-demo">
              <a href="#" @click.prevent="$emit('update:view', 'UserProfile')">个人资料</a> |
              <a href="#" @click.prevent="$emit('update:view', 'UserPosts')">帖子</a>
            </div>
          </div>`
        }
      }
      return null
    }
  },
  
  methods: {
    programmaticNav() {
      // 模拟编程式导航
      this.userId = Math.floor(Math.random() * 1000);
      this.currentView = 'User';
      alert(`通过编程式导航切换到用户页面，随机用户ID: ${this.userId}`);
    }
  }
}
</script>

<style scoped>
.router-tutorial {
  display: flex;
  width: 100%;
  margin-top: 20px;
  color: #2c3e50;
}

.tutorial-content {
  flex: 1;
  padding: 0 20px;
  max-height: 800px;
  overflow-y: auto;
  border-right: 1px solid #eaecef;
}

.knowledge-point {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 5px;
}

.knowledge-point h3 {
  color: #3eaf7c;
  margin-top: 0;
}

.knowledge-point ul {
  padding-left: 20px;
}

.knowledge-point pre {
  background-color: #282c34;
  color: #abb2bf;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}

.knowledge-point code {
  background-color: #f3f3f3;
  padding: 2px 4px;
  border-radius: 3px;
}

.code-playground {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.code-tabs {
  display: flex;
  margin-bottom: 10px;
}

.code-tabs button {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.code-tabs button.active {
  border-bottom: 2px solid #3eaf7c;
  color: #3eaf7c;
}

.code-editor {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 5px;
  height: 300px;
  overflow: auto;
}

.preview {
  margin-top: 20px;
}

.preview-container {
  border: 1px solid #eaecef;
  border-radius: 5px;
  padding: 20px;
  min-height: 200px;
}

.demo-app {
  font-family: Arial, sans-serif;
}

.nav-links {
  margin: 15px 0;
}

.nav-links a {
  margin-right: 5px;
  color: #3eaf7c;
  text-decoration: none;
}

.nav-links button {
  margin-left: 15px;
  padding: 5px 10px;
  background-color: #3eaf7c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.router-view-container {
  border: 1px solid #eaecef;
  border-radius: 5px;
  padding: 15px;
  margin-top: 15px;
  min-height: 100px;
}

.home-demo, .about-demo, .user-demo {
  padding: 10px;
}

.home-demo h3, .about-demo h3, .user-demo h3 {
  margin-top: 0;
  color: #3eaf7c;
}

.user-nav-demo {
  margin: 10px 0;
}

.user-nav-demo a {
  color: #3eaf7c;
  text-decoration: none;
  margin-right: 5px;
}
</style> 